<template>
  <v-container>
    <v-row class="green mt-n3">
      <v-col>
        <v-btn :to="{name:'Mall'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">商 品 详 情</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    <!-- 图片轮播展示 -->
    <!-- <v-container> -->
    <v-row>
      <v-carousel :continuous="false" height="300" hide-delimiters :show-arrows="false">
        <v-carousel-item contain class="mx-auto" v-for="(lunbo,i) in lunbos" :key="i" :src="lunbo.src">
        </v-carousel-item>
      </v-carousel>
    </v-row>
    <!-- </v-container> -->
    <!-- 信息介绍部分 -->
    <br>
    <v-card class="mx-auto" width="95%" height="90">
      <span style="position:absolute;bottom:4px;left:20px;color:orange;">3900 积分 + ￥ 4460</span>
      <span style="position:absolute;bottom:4px;left:180px;text-decoration:line-through;">4499</span>
      <span style="position:absolute;top:6px;left:10px;right:10px;font-size:13px;">华为 HUAWEI Mate 30 5G 麒麟990 4000万超感光徕卡影像双超级快充8GB+128GB星河银5G全网通游戏手机</span>
    </v-card>
    <!-- 参数选择部分 -->
    <br>
    <v-row>
      <v-card tile outlined class="mx-auto" width="420" height="40">
        <span style="position:relative;top:6px;left:10px;">选择规格</span>
        <span style="position:absolute;top:6px;right:10px;">
          <v-icon>keyboard_arrow_right</v-icon>
        </span>
      </v-card>
    </v-row>
    <br>
    <v-row>
      <v-card tile outlined class="mx-auto" width="100%" height="40">
        <span style="position:relative;top:6px;left:10px;">选择可用的优惠券</span>
        <span style="position:absolute;top:6px;right:10px;">
          <v-icon>keyboard_arrow_right</v-icon>
        </span>
      </v-card>
    </v-row>
    <!-- 商品详细信息 -->
    <br>
    <v-row class="justify-center">
      <span>———————— 商品详情 ————————</span>
    </v-row>
    <v-img src="../assets/商品详细信息.jpg"></v-img>

    <!-- 去掉底部Banner的遮挡 -->
    <v-row>
      <span style="display:inline-block;width:100%;height:48px;"></span>
    </v-row>

    <!-- 底部 -->
    <span style="position:fixed;bottom:0px;left:0px;width:65px;" class="white" align="center">
      <div>
        <v-btn icon color="red">
          <v-icon>favorite_border</v-icon>
        </v-btn>
      </div>
      <div style="position:relative;bottom:5px;">
        <span>收藏</span>
      </div>
    </span>
    <span style="position:fixed;bottom:0px;right:0px;">
      <v-btn tile color="orange" width="295" height="60">
        <span>立即购买</span>
      </v-btn>
    </span>

    <!-- 固定第一行在头部 -->
    <!-- <span style="position:fixed;top:0px;left:0px;right:0px;">
    <v-row class="green">
      <v-col>
        <v-btn :to="{name:'Mall'}" class="mx-2" tile icon small color="white">
          <v-icon>mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">商 品 详 情</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    </span> -->
    
  </v-container>
</template>

<script>
export default {
  data () {
    return {
      lunbos:[
        {src: require('../assets/详情1.jpg')},
        {src: require('../assets/详情2.jpg')},
        {src: require('../assets/详情3.jpg')},
        {src: require('../assets/详情4.jpg')},
        {src: require('../assets/详情5.jpg')},
      ],
    }
  },
}
</script>

<style scoped>
</style>